<template>
    <div class="detail">
        <div class="detail-status">
            <div class="status-text">
                <p v-if="orderStatus===1">未发货</p>
                <p v-if="orderStatus===2">已发货</p>
                <p v-if="orderStatus===3">已发放</p>
                <p v-if="orderStatus===4">已完成</p>
                <p v-if="orderStatus===2 || orderStatus===3">由广东供电局发货</p>
            </div>
            <img class="one" v-if="orderStatus===2 || orderStatus===3" src="../assets/order-detail/status-car.png">
            <img class="two" v-if="orderStatus===1 || orderStatus===4" src="../assets/order-detail/status-weifahuo.png">
        </div>
        <div class="detail-express">
            <div class="express-content" @click="express">
                <p class="one">快件已从广州XXX区出发，巴拿马星座</p>
                <p class="two">2018-10-10 22:22:00</p>
            </div>
        </div>
        <div class="detail-address">
            <div class="one">
                <p>收货人：张三</p>
                <p>110112113114</p>
            </div>
            <div class="two">
                <p>收货地址：广东省广东市广东区广东街广东省广东市广东区广东街</p>
            </div>
        </div>
        <div class="detail-list">
            <div class="detail-commodity">
                <div class="one"><img src="../assets/mall/mall-img2.png"/><span>4</span></div>
                <div class="two">
                    <p>生日礼物XXX等4件商品</p>
                    <p><span>4000</span>积分</p>
                </div>
                <div class="right">
                    <button class="blueBtn">再次兑换</button>
                </div>
            </div>
            <div class="detail-commodity">
                <div class="one"><img src="../assets/mall/mall-img2.png"/><span>4</span></div>
                <div class="two">
                    <p>生日礼物XXX等4件商品</p>
                    <p><span>4000</span>积分</p>
                </div>
                <div class="right">
                    <button class="whiteBtn" @click="lookCode">查看券码</button>
                    <button class="blueBtn">再次兑换</button>
                </div>
            </div>
        </div>
        <div class="detail-operation">
            <p>兑换成功操作</p>
        </div>
        <div class="detail-operation-content">
            <p>1,兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后</p>
            <p>2,兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后</p>
            <p>3,兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后兑换成功后</p>
        </div>
        <div class="detail-time">
            <p>订单编号：110110101</p>
            <p>订单类型：110110101</p>
            <p>下单时间：110110101</p>
            <p>发单时间：110110101</p>
        </div>
        <div class="detail-footer">
            <button class="whiteBtn">联系客服</button>
        </div>

        <!--查看券码弹窗-->
        <div class="code-alert" v-if="isLookCood">
            <div class="code-alert-content">
                <p>查看券码</p>
                <div class="inputBox">
                    <p>账号：123456</p>
                    <p>密码：100000</p>
                </div>
                <button @click="closeAlert">知道了</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "order-details",
        data() {
            return {
                orderStatus:1,
                isLookCood:false
            }
        },
        methods: {
            express: function () {
                this.$router.push({
                    name:'express',
                    params:{id:this.$route.params.id}
                })
            },
            lookCode: function () {
                this.isLookCood = true
            },
            closeAlert: function () {
                this.isLookCood = false
            }
        },
        created(){

        }
    }
</script>

<style scoped>
    .detail{
        padding-bottom:75px;
    }
    .detail-status{
        height: 95px;
        width: 100%;
        background-image: url("../assets/order-detail/status-bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 24px;
        display: flex;
        align-items: center;
        color: #fff;
        justify-content: space-between;
        font-size: 14px;
    }
    .detail-status p:first-child{
        font-size: 16px;
        margin-bottom: 5px;
    }
    .detail-status .one{
        width: 62px;height: auto;
    }
    .detail-status .two{
        width: 50px;height: auto;
    }
    /*kuaidi*/
    .detail-express{
        padding: 15px 10px 15px 40px;
        background-image: url("../assets/order-detail/small-car.png");
        background-size: 18px auto;
        background-repeat: no-repeat;
        background-position: 10px center;
        background-color: #fff;
    }
    .express-content{
        height: 100%;
        display: flex;
        align-items: left;
        flex-direction: column;
        background-image: url("../assets/icon-back.png");
        background-size: 10px auto;
        background-position: right center;
        background-repeat: no-repeat;
    }
    .express-content .one{
        font-size: 14px;
        color: #449613;
        width: 92%;
    }
    .express-content .two{
        color: #959594;
        font-size: 12px;
        margin-top: 3px;
    }
    .detail-address{
        padding: 15px 10px 15px 40px;
        background-image: url("../assets/icon-position.js.png");
        background-repeat: no-repeat;
        background-size: auto 16px;
        background-position: 15px center;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        font-size: 14px;
        background-color: #fff;
        border-top: 1px solid #dadada;
    }
    .detail-address .one{
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .detail-list{
        margin: 10px 0;
    }
    .detail-commodity{
        padding: 10px;
        background: #fff;
        display: flex;
        position: relative;
        border-bottom: 1px solid #dadada;
    }
    .detail-commodity:last-child{
        border: none;
    }
    .detail-commodity .one{
        width: 80px;
        height: 80px;
        flex: none;
        border: 1px solid #d3d3d3;
        position: relative;
    }
    .detail-commodity .one span{
        font-size: 12px;
        position: absolute;
        display: block;
        width: 15px;line-height: 15px;
        background-color: rgba(0, 0, 0, 0.31);
        text-align: center;
        color: #fff;
        right: 0;
        bottom: 0;
    }
    .detail-commodity .one img{
        max-height: 100%;max-width: 100%;
        height: auto;;width: auto;;
    }
    .detail-commodity .two{
        height: 80px;
        padding-left: 10px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        padding-bottom: 8px;
    }
    .detail-commodity .two p:first-child{
        padding-left: 35px;
        background-repeat: no-repeat;
        background-size: 32px 16px;
        background-position: left center;
        background-image: url("../assets/icon-shiwu.png");
        font-size: 15px;
    }
    .detail-commodity .two p:last-child{
        color: #ea4c3c;
        font-size: 13px;
    }
    .detail-commodity .two p:last-child span{
        font-size: 16px;
        font-weight: bold;
    }
    .detail-commodity .right{
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .detail-operation{
        height: 44px;padding: 0 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #dadada;
    }
    .detail-operation p{
        border-left: 3px solid #01377a;
        padding-left: 10px;
        font-weight: bold;
    }
    .detail-operation-content{
        font-size: 14px;
        padding: 20px 20px 10px 10px;
        background: #fff;
        margin-bottom: 10px;
    }
    .detail-operation-content p{
        margin-bottom: 5px;
    }

    .detail-time{
        padding: 10px;
        background: #fff;
        font-size: 14px;
        color: #949494;
        line-height: 1.7;
    }

    .detail-footer{
        height: 48px;
        border-top: 1px solid #dadada;
        background: #fff;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        bottom: 0;left: 0;right: 0;
    }

    /*查看券码*/
    .code-alert{
        position: fixed;
        left: 0;right: 0;bottom: 0;top: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .code-alert-content{
        width: 286px;
        height: 197px;
        background: #fff;
        border-radius: 3px;
        padding: 0 10px 10px 10px;
    }
    .code-alert-content>p{
        line-height: 48px;
        font-size: 16px;
        text-align: center;
    }
    .code-alert-content .inputBox{
        width: 100%;
        height: 80px;
        border: 1px solid #d2d2d2;
        padding: 0 14px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
    }
    .code-alert-content .inputBox p{
        flex: 1;
        display: flex;
        align-items: center;
    }
    .code-alert-content .inputBox p:first-child{
        border-bottom: 1px solid #d2d2d2;
    }
    .code-alert-content button{
        width: 100%;
        background: #123676;
        color: #fff;
        font-size: 14px;
        height: 44px;
        margin-top: 15px;
    }
</style>
